ExtJS তে কাস্টম ইভেন্ট (Custom Event) তৈরি করার মাধ্যমে আপনি কাস্টম আচরণ বা ইভেন্ট হ্যান্ডলিং যুক্ত করতে পারেন যা ডিফল্ট ইভেন্টগুলির বাইরেও কাজ করে। কাস্টম ইভেন্টগুলি ভিউ কম্পোনেন্টের ইন্টারঅ্যাকশনের উপর ভিত্তি করে চলতে পারে এবং অ্যাপ্লিকেশনের মধ্যে ইভেন্টের সমন্বয় ঘটাতে সহায়ক।
কাস্টম ইভেন্ট কী?
কাস্টম ইভেন্টগুলি হলো ইউজার ইন্টারঅ্যাকশনের মাধ্যমে বা কোডের মাধ্যমে ট্রিগার হওয়া ইভেন্ট যা আপনি নিজে তৈরি করেন। এগুলি সাধারণত একটি কম্পোনেন্টের মধ্যে বিশেষ পরিস্থিতি মোকাবেলা করার জন্য ব্যবহার করা হয়।
এখানে কাস্টম ইভেন্ট তৈরি করার প্রক্রিয়া এবং তার ব্যবহার দেখানো হয়েছে।
কাস্টম ইভেন্ট তৈরি করার জন্য প্রয়োজনীয় ধাপ
- কাস্টম ইভেন্ট ডিফাইন করা
প্রথমে কম্পোনেন্টে কাস্টম ইভেন্ট ডিফাইন করতে হবে। এটিExt.Componentক্লাস বা এর সাবক্লাসে ইভেন্ট ডিফাইন করা যায়। - কাস্টম ইভেন্ট ট্রিগার করা
যখন ইভেন্টটি ঘটবে, তখনfireEventমেথড ব্যবহার করে কাস্টম ইভেন্টটি ট্রিগার করতে হবে। - ইভেন্ট হ্যান্ডলার
কাস্টম ইভেন্টটি হ্যান্ডল করার জন্য একটি ইভেন্ট লিসেনার তৈরি করতে হবে, যা ইভেন্টটি ঘটলে একটি নির্দিষ্ট অ্যাকশন সম্পন্ন করবে।
উদাহরণ: কাস্টম ইভেন্ট তৈরি করা
ধরা যাক, আমরা একটি UserPanel কম্পোনেন্ট তৈরি করছি, যা একটি কাস্টম ইভেন্ট userLoggedIn ট্রিগার করবে যখন ব্যবহারকারী লগইন করবে। এই ইভেন্টটি সঠিকভাবে হ্যান্ডল করার জন্য একটি লিসেনার তৈরি করা হবে।
১. কাস্টম ইভেন্ট ডিফাইন করা
Ext.define('MyApp.view.UserPanel', {
extend: 'Ext.panel.Panel',
xtype: 'userpanel',
title: 'User Panel',
// কাস্টম ইভেন্ট ডিফাইন করা
fireLoginEvent: function(userName) {
this.fireEvent('userLoggedIn', userName); // কাস্টম ইভেন্ট ট্রিগার করা
}
});
এখানে, fireLoginEvent মেথডটি userLoggedIn নামে একটি কাস্টম ইভেন্ট ট্রিগার করবে এবং এতে ব্যবহারকারীর নাম প্যারামিটার হিসেবে পাঠানো হবে।
২. কাস্টম ইভেন্ট হ্যান্ডলিং
Ext.application({
name: 'MyApp',
launch: function() {
var userPanel = Ext.create('MyApp.view.UserPanel', {
renderTo: Ext.getBody()
});
// কাস্টম ইভেন্ট 'userLoggedIn' হ্যান্ডল করা
userPanel.on('userLoggedIn', function(userName) {
Ext.Msg.alert('Login Success', userName + ' logged in successfully!');
});
// কাস্টম ইভেন্ট ট্রিগার করা
userPanel.fireLoginEvent('John Doe');
}
});
এখানে, যখন fireLoginEvent মেথডটি কল করা হবে, তখন কাস্টম ইভেন্ট userLoggedIn ট্রিগার হবে। এরপর, সেই ইভেন্টটি হ্যান্ডল করার জন্য on মেথডের মাধ্যমে একটি ইভেন্ট লিসেনার যোগ করা হয়েছে, যা একটি Msg.alert প্রদর্শন করবে।
৩. কাস্টম ইভেন্ট ট্রিগার করার জন্য fireEvent
যখন একটি নির্দিষ্ট পরিস্থিতি ঘটবে, তখন আপনি fireEvent মেথড ব্যবহার করে কাস্টম ইভেন্টটি ট্রিগার করতে পারবেন।
this.fireEvent('userLoggedIn', userName);
এটি userLoggedIn ইভেন্টটি ট্রিগার করবে এবং যে কোনও হ্যান্ডলার এটি হ্যান্ডল করবে।
কাস্টম ইভেন্টের অন্যান্য ব্যবহার
- ইন্টারঅ্যাকটিভ UI: আপনি কাস্টম ইভেন্ট ব্যবহার করতে পারেন যাতে একটি কম্পোনেন্টে ইউজারের কার্যক্রম অনুযায়ী নতুন ইভেন্ট তৈরি হয় (যেমন, কোনো বোতাম ক্লিক হলে নতুন ডেটা লোড হওয়া)।
- কম্পোনেন্টের মধ্যে যোগাযোগ: এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা বা ইভেন্ট পাঠানোর জন্য কাস্টম ইভেন্ট খুবই কার্যকরী।
- অ্যাপ্লিকেশন লজিক: অ্যাপ্লিকেশনের বিশেষ পরিস্থিতিতে কাস্টম ইভেন্ট ব্যবহার করে নির্দিষ্ট লজিক বা ফাংশন ট্রিগার করা।
সারাংশ
- কাস্টম ইভেন্ট: একটি বিশেষ ধরনের ইভেন্ট যা আপনি নিজে তৈরি করেন এবং নির্দিষ্ট পরিস্থিতিতে ট্রিগার করেন।
- fireEvent: এই মেথড ব্যবহার করে কাস্টম ইভেন্ট ট্রিগার করা হয়।
- on: এই মেথড ব্যবহার করে কাস্টম ইভেন্টের জন্য ইভেন্ট লিসেনার (হ্যান্ডলার) সেট করা হয়।
ExtJS এ কাস্টম ইভেন্ট ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের লজিক এবং ইউজার ইন্টারফেসের মধ্যে আরও ভালো সমন্বয় করতে পারেন, যা অ্যাপ্লিকেশনকে আরও কার্যকরী ও রক্ষণাবেক্ষণযোগ্য করে তোলে।
Read more
